<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 300px;
            height: 100px;
            background-color: pink;
            animation-name: test;
            animation-duration: 3s;
            animation-timing-function: ease;
            animation-delay: 0s;
            animation-iteration-count: infinite;
            animation-direction: normal;
            animation-play-state: running;
            animation-fill-mode: none;
        }
        @keyframes test{
            0%{background-color: lightblue;}
            30%{background-color: lightgreen;}
            60%{background-color: lightgray;}
            100%{background-color: black;}
        }
    </style>
</head>
<body>
    参考这篇文章
    <!-- https://www.cnblogs.com/xiaohuochai/p/5391663.html -->
    <!-- animation-name: 动画名称(默认值为none)
    animation-duration: 持续时间(默认值为0)
    animation-timing-function: 时间函数(默认值为ease)
    animation-delay: 延迟时间(默认值为0)
    animation-iteration-count: 循环次数(默认值为1) infinite表示无限次数
    animation-direction: 动画方向(默认值为normal)
    animation-play-state: 播放状态(默认值为running)
    animation-fill-mode: 填充模式(默认值为none) -->

    <!-- animation-fill-mode
    none: 动画结束后，元素移动到初始状态
        [注意]初始状态并不是指0%的元素状态，而是元素本身属性值
    forwards: 元素停在动画结束时的位置
        [注意]动画结束时的位置并不一定是100%定义的位置，因为动画有可能反向运动，也有可能动画的次数是小数
    backwards:在animation-delay的时间内，元素立刻移动到动画开始时的位置。若元素无animation-delay时，与none的效果相同
        [注意]动画开始时的位置也不一定是0%定义的位置，因为动画有可能反向运动。
    both: 同时具有forwards和backwards的效果 -->

    <!-- animation涉及到的事件有animationstart、animationend、animationiteration -->
    <!-- animationstart动画开始
    animationend动画结束
    animationiteration 一次动画结束 循环次数大于1的时候会触发 -->

    <!-- 　只有改变animation-name时，才会使animation动画效果重新触发 -->
    <!-- oSb.style.animationName = 'none';
    setTimeout(function(){
        oSb.style.animationName = 'test';
    },100); -->
    <div class="test"></div>
</body>
</html>